<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工资列表 | 企业管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#3E92CC',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969'
                    },
                    fontFamily: {
                        inter: ['Inter','system-ui','sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .table-hover-row {
                @apply hover:bg-primary/5 transition-custom;
            }
        }
    </style>
</head>
<body class="bg-neutral font-inter text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-building text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-secondary">企业管理系统</h1>
        </div>
        <nav>
            <ul class="flex space-x-6">
                <li><a href="${pageContext.request.contextPath}/" class="text-neutral-dark hover:text-primary transition-custom"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="${pageContext.request.contextPath}/department" class="text-neutral-dark hover:text-primary transition-custom"><i class="fa fa-sitemap mr-1"></i>部门管理</a></li>
                <li><a href="${pageContext.request.contextPath}/employee" class="text-neutral-dark hover:text-primary transition-custom"><i class="fa fa-users mr-1"></i>员工管理</a></li>
                <li><a href="${pageContext.request.contextPath}/salary" class="text-primary font-medium"><i class="fa fa-money mr-1"></i>工资管理</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <!-- 面包屑导航 -->
    <div class="mb-6 text-sm text-neutral-dark">
        <a href="${pageContext.request.contextPath}/" class="hover:text-primary transition-custom">首页</a>
        <span class="mx-2">/</span>
        <span class="text-primary">工资管理</span>
    </div>

    <!-- 页面标题 -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <div>
            <h2 class="text-xl md:text-2xl font-bold text-secondary">工资列表</h2>
            <p class="text-neutral-dark mt-1">管理企业员工的工资信息</p>
        </div>
        <div class="mt-4 md:mt-0">
            <a href="${pageContext.request.contextPath}/salary?action=add"
               class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 focus:ring-4 focus:ring-primary/20 transition-custom shadow-sm">
                <i class="fa fa-plus mr-2"></i> 添加工资记录
            </a>
        </div>
    </div>

    <!-- 表格卡片 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden">
        <c:if test="${not empty errorMessage}">
            <div class="px-6 py-4 bg-red-50 border-b border-red-200 text-red-700">
                <div class="flex items-center">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <span>${errorMessage}</span>
                </div>
            </div>
        </c:if>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                <tr class="bg-gray-50 text-left text-neutral-dark">
                    <th class="px-6 py-4 font-medium">ID</th>
                    <th class="px-6 py-4 font-medium">员工姓名</th>
                    <th class="px-6 py-4 font-medium">部门</th>
                    <th class="px-6 py-4 font-medium">月份</th>
                    <th class="px-6 py-4 font-medium">基本工资</th>
                    <th class="px-6 py-4 font-medium">奖金</th>
                    <th class="px-6 py-4 font-medium">扣除项</th>
                    <th class="px-6 py-4 font-medium">实发工资</th>
                    <th class="px-6 py-4 font-medium text-right">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${salaries}" var="salary">
                    <tr class="border-b border-gray-100 table-hover-row">
                        <td class="px-6 py-4">${salary.id}</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-user text-primary"></i>
                                </div>
                                <span class="font-medium">${salary.employeeName}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <c:forEach items="${departments}" var="department">
                                <c:if test="${department.id == salary.departmentId}">
                                    ${department.name}
                                </c:if>
                            </c:forEach>
                        </td>
                        <td class="px-6 py-4 text-gray-600">${salary.month}</td>
                        <td class="px-6 py-4 text-gray-600">${salary.baseSalary}</td>
                        <td class="px-6 py-4 text-gray-600">${salary.bonus}</td>
                        <td class="px-6 py-4 text-gray-600">${salary.deduction}</td>
                        <td class="px-6 py-4 font-medium">${salary.baseSalary + salary.bonus - salary.deduction}</td>
                        <td class="px-6 py-4 text-right">
                            <a href="${pageContext.request.contextPath}/salary?action=edit&id=${salary.id}"
                               class="text-neutral-dark hover:text-primary transition-custom mr-3" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </a>
                            <a href="${pageContext.request.contextPath}/salary?action=delete&id=${salary.id}"
                               class="text-neutral-dark hover:text-red-500 transition-custom" title="删除"
                               onclick="return confirm('确定要删除该工资记录吗？此操作不可撤销。')">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                </c:forEach>

                <!-- 空状态 -->
                <c:if test="${empty salaries}">
                    <tr>
                        <td colspan="9" class="px-6 py-12 text-center text-gray-500">
                            <div class="flex flex-col items-center">
                                <div class="w-16 h-16 mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                                    <i class="fa fa-folder-open-o text-2xl text-gray-400"></i>
                                </div>
                                <p>暂无工资数据</p>
                                <a href="${pageContext.request.contextPath}/salary?action=add" class="mt-3 text-primary hover:underline">
                                    <i class="fa fa-plus mr-1"></i> 添加第一条工资记录
                                </a>
                            </div>
                        </td>
                    </tr>
                </c:if>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="px-6 py-4 border-t border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between">
            <div class="text-sm text-neutral-dark mb-4 md:mb-0">
                显示 1 到 10 条，共 25 条记录
            </div>
            <div class="flex items-center space-x-1">
                <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 text-neutral-dark hover:bg-gray-50 transition-custom">
                    <i class="fa fa-angle-left"></i>
                </button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 text-neutral-dark hover:bg-gray-50 transition-custom">2</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 text-neutral-dark hover:bg-gray-50 transition-custom">3</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-200 text-neutral-dark hover:bg-gray-50 transition-custom">
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-100 py-6">
    <div class="container mx-auto px-4 text-center text-neutral-dark text-sm">
        <p>© 2025 企业管理系统 | 版权所有</p>
    </div>
</footer>

<script>
    // 表格行悬停效果增强
    document.addEventListener('DOMContentLoaded', function() {
        const rows = document.querySelectorAll('tbody tr');
        rows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)';
            });
            row.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
        });
    });
</script>
</body>
</html>